<style>
  * {
    margin: 0;
    padding: 0;
  }
  html,
  body {
    background: black;
  }
  img {
    position: absolute;
  }
  div {
    width: 500px;
    height: 60px;
    border: #fff 1px solid;
  }
  div > span {
    height: 60px;
    background-color: red;
    display: inline-block;
  }
</style>
<body>
  <div><span style="width: 500px"></span></div>
  <script>
    //统计时间
    var n = 0;
    var timer2 = setInterval(function () {
      n++;
    }, 1000);
    //血条减少+判断血条长度
    var timer1 = setInterval(function () {
      var spanObj = document.querySelector("span");
      var width = parseInt(spanObj.style.width);
      spanObj.style.width = --width + "px";
      if (width <= 0) {
        clearInterval(timer1);
        clearInterval(timer2);
        clearInterval(timer3);
        document.body.removeEventListener("click", xx);
        alert("哈哈你失败了,你只坚持了" + n + "秒" + "点击确定重新开始挑战");
        location.reload();
      }
    }, 18);

    //生成星星
    var timer3 = setInterval(function (evt) {
      var e = evt || window.event;
      var imgObj = document.createElement("img");
      var rdmWidth = Math.floor(Math.random() * (50 - 30 + 1) + 30);
      var maxLeft =
        (window.innerWidth || document.documentElement.clientWidth) - rdmWidth;
      var maxTop =
        (window.innerHeight || document.documentElement.clientHeight) -
        rdmWidth;

      imgObj.style.width = rdmWidth + "px";
      imgObj.src = "./star.gif";
      imgObj.style.top = Math.floor(Math.random() * (maxTop - 0 + 1) + 0);
      imgObj.style.left = Math.floor(Math.random() * (maxLeft - 0 + 1) + 0);
      document.body.appendChild(imgObj);
    }, 400);
    //删除星星判断是否满足条件，满足血条+1;
    var xx = function (evt) {
      var e = evt || window.event;
      var target = e.target;
      if (target.nodeName == "IMG") {
        this.removeChild(target);
        console.log(this);
        console.log(target);
        var spanObj = document.querySelector("span");
        var width = parseInt(spanObj.style.width);
        width += 20;
        spanObj.style.width = width + "px";
      }
    };
    document.body.addEventListener("click", xx);
  </script>
</body>
